import React, { Component } from 'react';
import * as service from "../../api/index"
import { SearchBar, Swiper } from 'antd-mobile'
import "../../styles/Home.scss"

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            swiper: [],
            xuan: [],
            youwan: [],
            youji: []
        };
    }

    async componentDidMount() {
        //轮播图
        var res = await service.index_swiper()
        console.log(res.data);
        this.setState({ swiper: res.data },)
        //主页精选3张图
        var res1 = await service.index_xuan()
        console.log(res1.data);
        this.setState({ xuan: res1.data })

        // //主页游玩
        var res2 = await service.index_youwan()
        // console.log(res2.data[0]);
        this.setState({ youwan: res2.data[0] })
        // //主页游记
        var res3 = await service.index_youji()
        console.log(res3.data[0]);
        this.setState({ youji: res3.data[0] })

    }



    render() {

        return (
            <div className='home'>
                <div className='searc'>
                    <SearchBar placeholder='请输入内容' showCancelButton={() => true} onFocus={() => { this.props.history.push('/search') }} />
                </div>
                <div className="neirong">
                    {<div className='swiper'>
                        <Swiper autoplay loop autoplayInterval={2000}>
                            {this.state.swiper.map((item, index) => {
                                return (
                                    <Swiper.Item key={index}>
                                        <img src={item.img} alt="" />
                                        <h2>宝藏海岛-普吉岛</h2>
                                    </Swiper.Item>
                                )
                            })}
                        </Swiper>
                    </div>}
                    <div className="jingxuan">
                        <div className='top'>
                            <h4>本周精选</h4>
                            <p onClick={() => { this.props.history.push('/jingxuan') }}>查看更多</p>
                        </div>
                        <div className="xia">
                            {
                                this.state.xuan.map((item, index) => {
                                    return (
                                        <div className="xia_one" key={index}>
                                            <img src={item.img} alt="" />
                                            <p>{item.dizhi}</p>
                                            <p>{item.money}</p>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="youwan">
                        <div className='top'>
                            <h4>主题游玩</h4>
                            <p>查看更多</p>
                        </div>
                        <div className='zhong'>
                            {
                                this.state.youwan.one?.map((item, index) => {
                                    return (
                                        <div className='zhong_one' key={index}>
                                            <img src={item.img} alt="" />
                                            <h3>{item.title}</h3>
                                            <p>{item.jieshao}</p>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="xia">
                            {
                                this.state.youwan.list?.map((item, index) => {
                                    return (
                                        <div className="xia_one" key={index}>
                                            <img src={item.img} alt="" />
                                            <p>{item.dizhi}</p>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="youji">
                        <h4>精选游记</h4>
                        {
                            this.state.youji.pic?.map((item, index) => {
                                return (
                                    <div className="youji_one" key={index}>
                                        <img src={item.img} alt="" />
                                        <p>{this.state.youji.jieshao}</p>
                                        <div className="mao">
                                            <p>{this.state.youji.name}</p>
                                            <p>{this.state.youji.dianzan}</p>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>

        );
    }
}

export default Home;